<template>
    <div style="height: 100%;width: 100%;display: flex;justify-content: center;">
        <div style="
        width: 80%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;">
            <div style="
            width: 100%;
            height: 10%;
            background-color: aqua;
            display: flex;
            justify-content: center;
            ">
                <!--header-->
                <div style="height: 100%;font-size: larger;">
                    GameParty
                </div>
                <div style="
                display: flex;
                flex-direction: row-reverse;
                flex-grow: 1;
                height: 100%;
                ">
                    <el-button :icon="Avatar" @click="OnShowAdminLoginPanel" />
                </div>
            </div>
            <div v-loading="loading" style="width: 100%;height: 90%;">
                <GameList 
                style="width: 100%;height: 60%;" 
                :gamelist="gamelist" 
                :OnRowClick/>
            </div>
        </div>
    </div>
    <!--mask-->
    <div v-if="login" style="
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(207, 202, 202,0.5);
    z-index: 10;
    ">
        <div style="
        background-color: seashell;
        border-radius: 5px;
        padding:10px 10px 0 10px;
        box-shadow: var(--el-box-shadow);">
            <div style="
            display: flex;
            width: 100%;
            align-items: center;
            margin-top: 10px;
            ">
                <el-button 
                :icon="Back" 
                @click="OnBackStart"
                style="background-color: rgb(0, 0, 0,0);border: none;"/>
                <el-text style="flex-grow: 1;text-align: center;">管理员</el-text>
            </div>
            <el-divider />
            <el-form label-position="left" label-width="auto" :model="administratorAccount" style="max-width: 600px">
                <el-form-item label="账户">
                    <el-input v-model="administratorAccount.account" />
                </el-form-item>
                <el-form-item label="密码">
                    <el-input v-model="administratorAccount.password" />
                </el-form-item>
                <el-form-item>
                    <div style="display: flex;width: 100%;height: 100%;justify-content: center;">
                        <el-button @click="OnAdminLogin">登录</el-button>
                    </div>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup>
import GameList from '@/components/GameList.vue'
import { Avatar,Back} from '@element-plus/icons-vue';
import { onMounted, reactive, ref } from 'vue';
import router from '@/router';
import axios from 'axios';

let loading=ref(true);
let gamelist = reactive([]);

onMounted(function(){
    axios.get('http://127.0.0.1:8080/gamelist')
    .then(function(response){
        Object.assign(gamelist,response.data);
    }).catch(function(err){
        loadSuccess.value=false;
    }).finally(function(){
        loading.value=false;
    });
});

//是否启用蒙层
let login = ref(false);

let administratorAccount = reactive(
    {
        account: '',
        password: ''
    }
);
function OnShowAdminLoginPanel() {
    login.value = true;
}
function OnBackStart(){
    login.value=false;
}
function OnAdminLogin(){
    router.replace('/admin/gamelist');
}

function OnRowClick(row){
    router.replace(`/page/${row.id}`);
}
</script>